<template>
  <component
    :is="dialogType"
    lock-scroll
    :destroy-on-close="crud.tableOption.dialogDestroy"
    :wrapperClosable="crud.tableOption.dialogClickModal"
    :direction="direction"
    v-dialogdrag="vaildData(crud.tableOption.dialogDrag, config.dialogDrag)"
    :class="[
      'avue-dialog',
      b('dialog'),
      { 'avue-dialog--fullscreen': fullscreen },
    ]"
    :custom-class="crud.tableOption.dialogCustomClass"
    :modal-append-to-body="false"
    :style="styleName"
    :title="dialogTitle"
    :close-on-press-escape="crud.tableOption.dialogEscape"
    :close-on-click-modal="vaildData(crud.tableOption.dialogClickModal, false)"
    :modal="vaildData(crud.tableOption.dialogModal, false)"
    :show-close="crud.tableOption.dialogCloseBtn"
    :visible.sync="boxVisible"
    :size="size ? size : width"
    :width="setPx(width)"
    :before-close="hide"
    @opened="handleOpened"
  >
    <div slot="title" :class="b('dialog__header')">
      <span class="el-dialog__title">{{ dialogTitle }}</span>
      <div :class="b('dialog__menu')">
        <i
          @click="handleFullScreen"
          :class="fullscreen ? 'el-icon-news' : 'el-icon-full-screen'"
          class="el-dialog__close"
        ></i>
      </div>
    </div>
    <avue-form
      v-model="crud.tableForm"
      ref="tableForm"
      v-if="boxVisible"
      :status.sync="disabled"
      @change="handleChange"
      @submit="handleSubmit"
      @reset-change="hide"
      @tab-click="handleTabClick"
      @error="handleError"
      v-bind="$uploadFun({}, crud)"
      :option="formOption"
    >
      <template
        slot-scope="scope"
        v-for="item in crud.formSlot"
        :slot="getSlotName(item)"
      >
        <slot
          :name="item"
          v-bind="
            Object.assign(scope, {
              type: boxType,
            })
          "
        ></slot>
      </template>
    </avue-form>
    <span
      class="avue-dialog__footer"
      :class="'avue-dialog__footer--' + dialogMenuPosition"
      v-if="!isView"
    >
      <el-button
        v-if="vaildData(formOption.submitBtn, true)"
        @click="submit"
        :disabled="disabled"
        :size="crud.controlSize"
        :icon="formOption.submitIcon || 'el-icon-check'"
        type="primary"
        >{{ formOption.submitText }}</el-button
      >
      <el-button
        v-if="vaildData(formOption.emptyBtn, true)"
        @click="reset"
        :disabled="disabled"
        :size="crud.controlSize || 'el-icon-delete'"
        :icon="formOption.emptyIcon"
        >{{ formOption.emptyText }}</el-button
      >
      <slot
        name="menuForm"
        :disabled="disabled"
        :size="crud.controlSize"
        :type="boxType"
      ></slot>
    </span>
  </component>
</template>

<script>
import { Crud } from '../../../../assets/avue/avue'
import config from './config'

export default {
  extends: Crud.components.dialogForm,
  data() {
    return {
      config,
    }
  },
  inject: ['crud'],
  computed: {
    width() {
      // console.log(this.crud.tableOption.dialogWidth)
      // console.log(this.crud.isMobile)
      // console.log(config.dialogWidth)
      return this.vaildData(
        `${this.crud.tableOption.dialogWidth}`,
        this.crud.isMobile ? '100%' : `${config.dialogWidth}`
      )
    },
    dialogMenuPosition() {
      return this.crud.option.dialogMenuPosition || 'center'
    },
  },
}
</script>

<style lang="scss" scoped></style>
